<!DOCTYPE html>
<html lang="vi">
<head>
	<meta charset="UTF-8">
	<title>Client Live Chat</title>
	<!-- Bootstrap CSS -->
	<link href="public/css/bootstrap.min.css" rel="stylesheet" />
	 
	<!-- bootstrap JavaScript -->
	<script type="text/javascript" src="public/js/bootstrap.min.js"></script>
	
	<!--custom css-->
	<link rel="stylesheet" type="text/css" href="public/css/style.css">

	<!--Client nodejs-->
	<script src="http://192.168.1.51:8001/socket.io/socket.io.js"></script>
	<script src="public/js/jquery.min.js"></script>
	<script>
		var socket = io.connect('http://localhost:8001');

		// Ket noi voi may chu, yeu cau gui thong bao ten
		socket.on('connect', function(){
			// call the server-side function 'adduser' and send one parameter (value of prompt)
			socket.emit('adduser', prompt("Vui lòng cho biết tên?"));
			//var sessionid = socket.io.id;
		});

		//private message
		socket.on('privatemessage', function (from, msg) 
		{
	    	console.log('I received a private message by ', from, ' saying ', msg);
	 	});

		// listener, whenever the server emits 'updatechat', this updates the chat body
		socket.on('updatechat', function (username, id, data){
			//id=socket.socket.sessionid;
			var dtclient={Ma:' ' + id + ' ',Name: ' ' + username + ' ',message: ' ' + data + ' '}
      		$('#conversation').append('<b style="color:blue;">'+ dtclient.Name + ':</b> ' + dtclient.Ma + ':' + dtclient.message + '<br>');//+ idclient + '<br>'
		});

		// on load of page
		$(function()
		{
			// Khi client kich nut  SEND
			$('#datasend').click( function() 
			{
				var message = $('#data').val();
				$('#data').val('');
				// tell server to execute 'sendchat' and send along one parameter
				socket.emit('sendchat', message);
			});
			// Khi nguoi dung nhan enter de gui
			$('#data').keypress(function (e) 
			{
				if(e.which == 13) 
				{
					$(this).blur();
					$('#datasend').focus().click();
				}
			});
		});
</script>
<!--End js -->
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h2>Chat - Client</h2>
			</div>
		</div><!--/end row-->
		<div class="row">
			<div class="col-md-3"></div>
			<div class="col-md-6">
				<div class="panel panel-primary">
					<div class="panel-heading">Chat với chúng tôi</div>
					<div class="panel-body">
						<!--Nội dung chat nằm ở đây-->
						<strong id="name"></strong>
						<p id="log"></p>
      					<div id="conversation"></div>
					</div>
					<div class="input-group">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="Nhập nội dung cần gửi" id="data"></input>
							<span class="input-group-btn">
								<button class="btn btn-default" type="button" id="datasend">Send</button>
							</span>
						</div>
						<!-- /input-group -->
					</div>
				</div>
			</div>
			<!--end .col-md-8-->
			<div class="col-md-3"></div>
		</div><!--end row-->
		<div id="footer">
			<div class="row">
				<div class="col-md-12">
					Thực hiện bởi nhóm 11-12: gồm các thành viên:<br/>
				</div>
			</div>
			<div class="row">
				<div class="col-md-3"></div>
				<div class="col-md-9">
					<span class="label label-default">Nguyen Kim Ngan</span>
					<span class="label label-primary">Luong Minh Son</span>
					<span class="label label-success">To Thanh Dung</span>
					<span class="label label-info">Nguyen Thai Hoang</span>
				</div>
			</div>
		</div><!--End footer-->
	</div><!--end container-->
	<!--thao tac voi file-->
</body>
</html>